<template>
    <div id='wrap'>
        <h1>侦听器使用场景</h1>
        <p>{{ app }}</p>
        <input type="text" v-model="app">
        <!-- 使用侦听器实现实时更新视图 -->
        <p ref="box"></p>
        <input type="text" v-model="data">
        <!-- 触发cpunt更新 -->
        <p>{{ count }}</p>
    </div>
</template>
<script lang='ts'>
export default {
    name: '侦听器使用场景',
}
</script>
<script lang='ts' setup>
import App from '@/App.vue';
import { ref, h, type Ref, isRef, reactive, isReactive, readonly, isReadonly, toRef, toRefs, unref, isProxy, watchEffect, watch } from 'vue';
const app = ref('hello world');

//使用侦听器实现实时更新视图
const data = ref('你好世界');
const box = ref<HTMLElement | null>(null);

watchEffect(() => {
    if (box.value) {
        box.value.textContent = data.value;
    }
})


//需要管理副作用
const count = ref(0);
const stop = watchEffect((funs) => {
    console.log(count.value);
    const time = setInterval(() => {
        count.value++;
    }, 2000);

    //清除副作用（定时器抖动）
    funs(() => {
        clearInterval(time);
    })
})
//关闭计时器
stop();
</script>
<style lang='scss'>
@use '@/assets/common.scss';
</style>